<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 10px;
      padding: 10px;
      width: 180px;
      height: 180px;
      border: 10px solid #000000;

    }
    #father{
      margin: 10px;
      padding: 10px;
      border: 2px solid #000000;
      /*overflow: hidden;*/
    }
    .child{
      margin: 10px;
      padding: 10px;
      height: 50px;
      width: 50px;
      border: 5px solid #eace42;
      background: aqua;

    }
  a{
    height: 50px;
    width: 50px;
    display: block;
    text-decoration: none;
    text-align: center;     /*  文字居中  */
    /*font:bold 20px/50px Arial; !*  文字去中心  *!*/
    color: white;
    background: #80D0C7;
  }
  a:hover{
    background: #a24fff;
  }
  #first{
    position: relative;

  }
  #second,#fourth{
    position: relative;
    top: -50px;
    left: 120px;
  }
  #third{
    position: relative;
    left: 0px;
    bottom:  0px;
  }
/*  #fourth{
    position: relative;
    left: 120px;
    bottom: 30px;
  }*/
  #fifth{
    position: relative;
    top:-140px;
    left: 60px;
  }


  </style>
</head>
<body>
  <div id="father">
    <a href="#" id="first">链接1</a>
    <a href="#" id="second">链接2</a>
    <a href="#" id="third">链接3</a>
    <a href="#" id="fourth">链接4</a>
    <a href="#" id="fifth">链接5</a>

  </div>
<!--
    <div  class="child" id="first"> </div>
    <div  class="child" id="second"></div>
    <div  class="child" id="third"> </div>
    <div  class="child" id="fourth"></div>
    <div  class="child" id="fifth"> </div>-->

</body>
</html>